<template>
    <div class="app-container">
        <!-- <PageHeader :border="false" title="预案查询" /> -->

        <el-form ref="queryParamsRef" :model="queryParams" label-width="auto">

            <el-row>
                <el-col style="flex: 1 1 0;">
                    <el-row :gutter="16">
                        <el-col :span="8">
                            <el-form-item label="办案单位：" prop="unitId">
                                <el-tree-select v-model="queryParams.unitId" :data="deptOptions" default-expand-all
                                    :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                                    value-key="deptId" placeholder="选择单位" check-strictly @node-click="deptNameClick" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="警务区：" prop="policeAreaId">
                                <el-select v-model="queryParams.policeAreaId" @change="getList">
                                    <el-option v-for="item in PoliceAreaList" :key="item.policeareaId"
                                        :label="item.areaname" :value="item.policeareaId" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="状态：" prop="state">
                                <el-select v-model="queryParams.state" style="width: 12.5rem" @change="getList">
                                    <el-option v-for="item in nj_applydetail_status" :key="item.value"
                                        :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="开始时间：">
                                <el-date-picker v-model="searchTime" type="daterange" range-separator="-"
                                    start-placeholder="开始时间" end-placeholder="截止时间" value-format="YYYY-MM-DD"
                                    @change="changeDateTimerHandle" @clear="changeDateTimerHandle" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-divider direction="vertical" style="height: 84px" />
                <el-col style="flex: 0 0 86px;">
                    <el-space :size="18" direction="vertical">
                        <el-button type="primary" @click="getList">
                            <el-icon class="me-1">
                                <Search />
                            </el-icon>
                            查询
                        </el-button>
                        <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh />
                            </el-icon>
                            重置
                        </el-button>
                    </el-space>
                </el-col>
            </el-row>

        </el-form>

        <el-divider class="mt-0" />

        <el-table :data="tableData" v-loading="loading" border stripe
        :row-style="tableRowStyle">
            <el-table-column prop="unitname" label="办案单位" />
            <el-table-column prop="areaname" label="警务区" />
            <el-table-column prop="roomname" label="房间名称" />
            <el-table-column prop="fact_indate" label="开始时间" />
            <el-table-column prop="fact_outdate" label="结束时间" />
            <el-table-column prop="stateText" label="状态" width="180" align="center" />
            <!-- <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button type="primary" size="small" link @click="planDetailRef.showDetail(scope.row)">
                        <el-icon class="me-1">
                            <View />
                        </el-icon>
                        查看
                    </el-button>
                </template>
</el-table-column> -->
        </el-table>

        <pagination v-show="total > 0" v-model:limit="paging.pageSize" v-model:page="paging.pageNum" :total="total"
            @pagination="getList" />

        <!-- <PlanDetail ref="planDetailRef" /> -->
    </div>
</template>

<script setup>
import PageHeader from "@/components/PageHeader/index.vue";
import { Refresh, Search, View } from "@element-plus/icons-vue";
import { useTemplateRef } from "vue";
import { getOverTimeList } from "@/api/ApplyDetail/ApplyDetail";
import { listDept, } from "@/api/system/dept";
import { getPoliceAreaList, } from "@/api/PoliceAreaManage/PoliceAreaManage";
import PageEnum from "@/enum/PageEnum.js";

// import PlanDetail from "@/views/PlanManage/PlanSearch/components/PlanDetail.vue";


const { proxy } = getCurrentInstance()
const { nj_applydetail_status } = proxy.useDict('nj_applydetail_status')

const loading = ref(false)
const total = ref(0)
const paging = ref({
    pageNum: 1,// 页码    
    pageSize: PageEnum.SIZE// 分页数量
})
// 表格属性
const Areapaging = ref({
    pageNum: 1,// 页码
    pageSize: 9999// 分页数量
})
// 所属单位
const deptOptions = ref([]);
// 警务区列表
const PoliceAreaList = ref([]);
// 警务区
const AreaListqueryParams = ref({
    unitId: '',
})

const searchTime = ref([])
const queryParams = ref({
    // 查询时候选择的ID
    unitId: '',
    // 申请单位id外键，本单位ID
    unitIdChild: '',
    // 状态
    state: '',
    // 警务区id,外键
    policeAreaId: '',
    params: {
        'beginTime': '',
        'endTime': ''
    }
})

const deptqueryParams = ref({})

const tableData = ref([])
const queryParamsRef = useTemplateRef('queryParamsRef')
const planDetailRef = useTemplateRef('planDetailRef')

onMounted(() => {
    getList();
    getQueryLists();
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取列表
const getList = async () => {
    console.log(queryParams.value);
    loading.value = true
    const res = await getOverTimeList(queryParams.value, paging.value)
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
}

// 获取查询下拉数据
const getQueryLists = async () => {
    await listDept(deptqueryParams.value).then(res => {
        deptOptions.value = res.data.filter(
            item => item.isUnit === true
        );
        deptOptions.value = proxy.handleTree(deptOptions.value, "deptId");
    })
}

/** 节点单击事件 */
function deptNameClick(data) {
    AreaListqueryParams.value.unitId = data.deptId;
    queryParams.value.unitId = data.deptId;
    console.log(queryParams.value);
    getAreaLists();
    getList();
};

// 获取警务区列表
const getAreaLists = async () => {
    await getPoliceAreaList(AreaListqueryParams.value, Areapaging.value).then(res => {
        PoliceAreaList.value = res.rows
    })
}

// 改变时间
const changeDateTimerHandle = (date) => {
    console.log(date)
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }
    getList()
}

// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    queryParams.value.params.beginTime = ''
    queryParams.value.params.endTime = ''
    await getList()
}
</script>

<style scoped lang="scss">
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
</style>